import Clay from "@csii/vx-clay";
import lineImage from "./line.clay";
import line from "./line.js";
Clay.series("ui-line", line);
new Clay({
  el: document.getElementById("root"),
  render: lineImage,
  data() {
    return {
      select: -1,
      dashSelect: -1,
      data: [
        {
          name: "小明",
          marks: [
            { name: "语文", value: "46" },
            { name: "数学", value: "63" },
            { name: "英语", value: "67" },
            { name: "历史", value: "28" },
            { name: "物理", value: "77" },
            { name: "化学", value: "18" },
            { name: "生物", value: "67" },
          ],
        },
        {
          name: "小李",
          marks: [
            { name: "语文", value: "69" },
            { name: "数学", value: "35" },
            { name: "英语", value: "27" },
            { name: "历史", value: "86" },
            { name: "物理", value: "58" },
            { name: "化学", value: "37" },
            { name: "生物", value: "39" },
          ],
        },
        {
          name: "小王",
          marks: [
            { name: "语文", value: "38" },
            { name: "数学", value: "74" },
            { name: "英语", value: "87" },
            { name: "历史", value: "38" },
            { name: "物理", value: "96" },
            { name: "化学", value: "58" },
            { name: "生物", value: "79" },
          ],
        },
      ],
    };
  },
  methods: {
    dash(target) {
      this.dashSelect = target.subRegion;
      this.$setHover({
        title: target.attr.data[0].marks[target.subRegion].name, // 标题
        x: target.left, // 悬浮的位置
        y: target.top,
        show: true, // 是否显示悬浮
        // background: string,  // 背景色
        // width: number, // 悬浮的宽
        // color: string,  // 文字颜色
        // "title-size": number, // 标题文字大小
        // "item-size": number, // 子条目文字大小
        items: [
          {
            // 条目
            color: "red", // 圆颜色
            content:
              target.attr.data[0].name +
              ":" +
              target.attr.data[0].marks[target.subRegion].value,
            radius: 5, // 圆半径
          },
          {
            // 条目
            color: "red", // 圆颜色
            content:
              target.attr.data[1].name +
              ":" +
              target.attr.data[1].marks[target.subRegion].value,
            radius: 5, // 圆半径
          },
          {
            // 条目
            color: "red", // 圆颜色
            content:
              target.attr.data[2].name +
              ":" +
              target.attr.data[2].marks[target.subRegion].value,
            radius: 5, // 圆半径
          },
        ],
      });
    },
    doit(target) {
      this.select = target.subRegion;
      console.log(this.select, "ssssl");
    },
  },
  mounted() {
    // this.$bind("mousemove", function (target) {
    //   if (target.subRegion == null) {
    //     this.select = "-1";
    //     this.dashSelect = -1;
    //   }
    // });
  },
});
